<template>
	<view class="container">
		<view class="code">
			<input type="number" v-model="phone" @input="teltest()" placeholder="请输入您需要修改的手机号" placeholder-class="cl" />
		</view>
		<view class="code">
			<input type="number" v-model="code" placeholder="请输入验证码" placeholder-class="cl" />
			<view class="btn" @click="getyzm()" :style="{color:btnBool?'#5398E5':'#CACACA'}">{{yzmtext}}</view>
		</view>
		<view :class="['save',{'active':code!==''&&phone!==''}]" @click="save">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnBool: false,
				yzmtext: "获取验证码",
				info: "",
				code: "",
				phone: "",
				token: "",
			}
		},
		created() {
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth'
					});
				}
			});
		},
		methods: {
			getyzm() {
				if (this.btnBool && this.teltest()) {
					this.btnBool = false;
					let i = 60;
					let timer = setInterval(() => {
						this.yzmtext = '获取验证码' + i + 's';
						i--;
						if (i < 0) {
							this.btnBool = true;
							this.yzmtext = '获取验证码';
							clearInterval(timer);
						}
					}, 1000);
					uni.request({
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						url: `https://mx.acktechnologies.com.cn/api/sms/send`,
						data: {
							"mobile": this.phone,
							"event": 'bindmobile'
						},
						method: 'POST',
						success: res => {
							console.log(res)
							if (res.data.code === 1) {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							} else if (res.data.code === 403) {
								uni.redirectTo({
									url: '../../login/auth'
								});
							} else {
								uni.showToast({
									title: '服务器开小差了呢，请您稍后再试',
									icon: 'none'
								})
							}
						},
						fail: () => { //接口请求失败的处理
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						},
					});
				} else {
					return false;
				}
			},
			teltest() {
				const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
				if (this.phone == '' || this.phone.length <= 10 || !reg.test(this.phone)) {
					this.btnBool = false;
					return false;
				} else {
					this.btnBool = true;
					return true;
				}
			},
			save() {
				if (this.code === '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				if (this.phone === '') {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}
				let param = {
					"token": this.token,
					"smscode": this.code,
					"mobile": this.phone
				}
				this.$request('/api/wxapp/mine/index/bindMobile', param).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(function() {
							uni.redirectTo({
								url: './index',
								success() {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (!page) return;
									page.onLoad(); //如果页面存在，则重新刷新页面
								}
							});
						}, 2000)
					} else if (res.code === 403) {
						uni.redirectTo({
							url: '../../login/auth'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/myinfo`,
					data: {
						"token": this.token
					},
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							let info = res.data.data;
							this.info = info;
							uni.hideLoading();
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 60rpx 0 48rpx;
		box-sizing: border-box;

		.code {
			width: 642rpx;
			height: 70rpx;
			border-bottom: 1px solid #EDEDED;
			position: relative;
			margin-top: 40px;
			overflow: hidden;

			.btn {
				position: absolute;
				bottom: 20%;
				right: 0;
				font-size: 17px;
				color: #CACACA;
				z-index: 99;
			}

			.active {
				color: #5398E5;
			}

			input {
				height: 100%;
			}
		}

		.cl {
			font-size: 15px;
			color: #CACACA;
		}
	}

	.save {
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #E3E3E3;
		border-radius: 40rpx;
		margin: 90px auto 0 auto;
		font-size: 18px;
		color: #FFFFFF;
	}

	.active {
		background: linear-gradient(90deg, #9BDFB5 0%, #84DFD1 100%);
	}
</style>
